import { react, useState } from "react"

function FunFormComponent() {

    const [products, setProducts] = useState([]); // 商品列表
    const [formData, setFormData] = useState({ name: '', price: '' }); // 表单数据

    // 处理表单输入变化
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };
    // 添加商品
    const handleAddProduct = () => {
        if (!formData.name || !formData.price) {
            alert('请填写商品名称和价格！');
            return;
        }
        // 组装新商品对象
        const newProduct = {
            id: Date.now(), // 使用时间戳作为唯一 ID
            name: formData.name,
            price: parseFloat(formData.price), // 转换为数字
        };
        setProducts([...products, newProduct])
        // 清空表单
        setFormData({ name: '', price: '' });
    }
    // 取消添加（清空表单）
    const handleCancel = () => {
        setFormData({ name: '', price: '' });
    };

    return (
        <div>
            <h1>商品管理</h1>
            <form>
                <div style={{ marginBottom: '10px' }}>
                    <label>商品名称:</label>
                    <input
                        type="text"
                        name="name"
                        value={formData.name}
                        onChange={handleInputChange}
                        placeholder="请输入商品名称"
                        style={{ padding: '4px' }} />
                </div>
                <div style={{ marginBottom: '10px' }}>
                    <label>商品价格:</label>
                    <input
                        type="number"
                        name="price"
                        value={formData.price}
                        onChange={handleInputChange}
                        placeholder="请输入商品价格"
                        style={{ padding: '4px' }} />
                </div>
                <div style={{ gap: '10px' }}>
                    <button type="button" onClick={handleAddProduct}>添加商品</button>
                    <button type="button" onClick={handleCancel}>取消添加</button>
                </div>
            </form>
            <div>
                {/* 商品列表 */}
                <h2 style={{ marginTop: '20px' }}>商品列表</h2>
                {products.length > 0 ? (
                    <ul style={{ listStyle: 'none', padding: 0 }}>
                        {products.map((product) => (
                            <li
                                key={product.id}
                                style={{
                                    padding: '10px',
                                    border: '1px solid #ddd',
                                    borderRadius: '5px',
                                    marginBottom: '10px',
                                }}
                            >
                                {product.name} - ¥{product.price.toFixed(2)}
                            </li>
                        ))}
                    </ul>
                ) : (
                    <p>暂无商品。</p>
                )}
            </div>
        </div>
    )
}
export default FunFormComponent;